<template>
    <div class='tab3-pirces'>
        <div class='tab-item tab-item-title'>Combien de pièces</div>
        <div class='tab-item tab-item-content'>
            <v-btn-toggle
                class='text-capitalize'
                v-model='piecesData.value'
                tile
                color='deep-purple accent-3'
                group
                multiple
            >
                <v-btn
                    height='35'
                    style='font-size:15px; font-weight:500; padding: 0px 1px; margin: 0px 4px;'
                    v-for='item in textArr'
                    :value='item'
                    class='v-btn-add-style'
                    :key='item'
                >{{ item === 'T5' ? '5+' : item }}</v-btn>
            </v-btn-toggle>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            textArr: ['T1', 'T2', 'T3', 'T4', 'T5'],
        };
    },
    computed: {
        ...mapState({
            piecesData: state => state.searchData.piecesData,
        }),
    },
    methods: {
        ...mapMutations({
            commitTypeData: 'searchData/commitTypeData',
            commitInit: 'searchData/commitInit',
        }),
    },
    watch: {
        'piecesData.value'() {
            this.commitInit({ k: 'piecesInit', v: this.piecesData.value === '' || typeof this.piecesData.value === 'undefined' });
            this.commitTypeData({
                k: 'piecesData',
                data: {
                    value: this.piecesData.value,
                },
            });
        },
    },
};
</script>


<style lang='scss'></style>